<template>
    <div class="confirmTrade">
        <div class="header">
            <div class="backPage" @click="choosePay">
                <image class="arrow_left" :src="imgPath('back.png')"></image>
                <text class="back col_fff medium" >返回</text>
            </div>
            <text class="title col_fff regular">确认交易</text>
        </div>
        <div class="tradeHeader">
            <div class="topText">
                <text class="text">￥</text>
                <text class="text">{{totalPrice}}</text>
            </div>
            <div class="topText">
                <text class="text1">泳衣库-订单编号</text>
                <text class="text1">12345678910</text>
            </div>
        </div>
        <div class="rows">
            <text class="rowText">收款方</text>
            <text class="rowText">泳衣库平台商户</text>
        </div>
        <div class="payBtn">
            <div class="Btn" @click="pushToPayFinish">
                <text class="btntext">微信支付￥</text>
                <text class="btntext">{{totalPrice}}</text>
            </div>
        </div>
        <Dialog :show="dialogShow"  @dialogclose="cancel">
        <div class="content">
        <div class="company-item">
        <text class="con">是否进行支付</text>
        </div>
        </div>
        <div class="footer-wrapper flex_row">
        <text class="footer-btn cancel" @click="cancel">取消</text>
        <text class="footer-btn confirm" @click="confirm">确认</text>
        </div>
        </Dialog>
    </div>
</template>
<script>
import IHeader from '@/components/header'
import Dialog from '@/components/dialog'
const modal = weex.requireModule('modal')
export default {
  name: 'confirmTrade',
  data () {
    return {
      totalPrice: '',
      orderAchieve: false,
      dialogShow: false,
      orderId: ''
    }
  },
  methods: {
    pushToPayFinish () {
      this.$router.push({path: 'payFinish', query: {params: this.totalPrice, orderId: this.orderId}})
    },
    choosePay () {
      const that = this
      that.dialogShow = true
    },
    cancel () {
      const that = this
      that.dialogShow = false
      that.$router.push({path: '/myorder/storeOrder', query: {idx: 1}})
    },
    confirm () {
      const that = this
      that.$router.push({path: 'payFinish', query: {params: this.totalPrice, orderId: this.orderId}})
    }
  },
  created: function () {
    this.totalPrice = this.$route.query.params
    this.orderId = this.$route.query.orderId
    modal.toast({
      message: this.orderId
    })
  },
  components: {
    IHeader,
    Dialog
  }
}
</script>
<style>
    .confirmTrade{
        background-color: rgb(245,245,245);
    }
</style>
<style scoped>
    .tradeHeader{
        flex-direction: column;
        justify-content: center;
        margin-top: 88px;
        align-items: center;
        padding-top: 65px;
        padding-bottom: 65px;
    }
    .topText{
        flex-direction: row;
        align-items: baseline;
    }
    .text{
        font-size:98px;
        font-weight:bold;
    }
    .rows{
        height:88px;
        background-color: #fff;
        padding-left:24px;
        padding-right:24px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .rowText{
        font-size: 28px;
        color: rgb(134,134,134);
    }
    .payBtn{
        margin-top:30px;
        flex-direction:row;
        justify-content: center;
        align-items: center;
    }
    .Btn{
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        height:60px;
        padding-left:195px;
        padding-right:195px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .btntext{
        color:rgb(255,255,255);
        font-size:30px;
        font-family:medium;
    }
    .col_fff {
        color: #fff;
    }
    .col_cecece {
        color: #cecece;
    }
    .regular {
        font-family: regular;
    }
    .medium {
        font-family: medium;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        flex-direction: row;
        height: 88px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .backPage {
        width: 200px;
        flex-direction: row;
        align-items: center;
        padding-right: 8px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 32px;
        line-height: 88px;
    }
    .title {
        width: 350px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        line-height: 88px;
    }
    .content {
        padding-left: 54px;
        padding-right: 54px;
    }
    .company-item {
        margin-bottom: 20px;
        flex-direction: row;
    }
    .footer-wrapper {
        margin-top: 40px;
        padding-left: 110px;
        padding-right: 110px;
        justify-content: space-between;
    }
    .footer-btn {
        width: 124px;
        height: 44px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        line-height: 44px;
        font-size: 26px;
        text-align: center;
        border-radius: 8px;
    }
    .cancel {
        color: #2b3040;
        background-color: #fff;
    }
    .confirm {
        color: #fff;
        background-color: #2b3040;
    }
    .flex_row {
        flex-direction: row;
    }
</style>
